{% extends "single_demo.html" %}

{% block demo-header %}tv.ui.Component{% endblock %}

{% block demo-content %}

<style>
.component-demo {
  border: 1px solid white;
  padding: 5px;
  margin: 20px;
  -webkit-border-radius: 5px;
}

.different-size {
  height: 50px;
  width: 200px;
  margin: 0 auto;
}

.component-demo.tv-component-focused {
  background-color: rgba(255, 255, 255, 0.3);
}

.different-highlight.tv-component-focused {
  background: none;
  -webkit-box-shadow: 0 0 20px #6391de, 0 0 7px #f2f2f2, 0 0 2px #FFF;
}

.different-zoom {
  margin: 0 auto;
  text-align: center;
  width: 200px;
}

.different-zoom.tv-component-focused {
  zoom: 2;
  -webkit-transition: all 1s ease;
}

.different-rotate {
  margin: 20px auto;
  text-align: center;
  width: 200px;
}

.different-rotate.tv-component-focused {
  -webkit-transform: rotate(30deg);
  -webkit-transition: all 1s ease;
}

</style>

Main building block of tv.ui.Decoration is tv.ui.Component. It has only notion of
of being focused. You can use keyboard or mouse for navigation.

<!-- TODO(maksym): Visibility demo. -->

<p>CSS class used for decoration: <code>tv-component</code></p>

<div class="tv-container-vertical">

<div class="tv-component component-demo">
  Content can be arbitral HTML, like text.
</div>

<div class="tv-component component-demo">
  Or image. <img src="http://www.google.com/tv/static/images/logo_146x38.png"/>
</div>

<div class="tv-component component-demo different-size">
  Different sizes.
</div>

<div class="tv-component component-demo different-highlight">
  And different highlight.
</div>

<div class="tv-component component-demo different-highlight different-zoom">
  Or it can zoom.
</div>

<div class="tv-component component-demo different-highlight different-rotate">
  Yes, it can rotate.
</div>

  </div>

{% endblock %}